<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/vant.css">
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <script type="text/javascript" src="script/jquery.js"></script>
    <script type="text/javascript" src="script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="script/vue.min.js"></script>
    <script type="text/javascript" src="script/vant.min.js"></script>
    <script type="text/javascript" src="script/fastclick.js"></script>
    <script type="text/javascript" src="script/base.js"></script>
    <style type="text/css">
        body {
            zoom: 0.9;
        }

        .right {
            background: #fff;
            width: 100%;
        }

        .bg {
            width: 100%;
            height: 100%;
            display: flex;
            background-image: url('./image/xingdabg.jpg');
            background-size: 100% 100%;
        }

        .op {
            width: 100%;
            height: 60px;
            font-weight: 700;
            color: #f7f7fb;
            font-size: 60px;
            margin-left: -24px;
            letter-spacing: -2px;
        }

        .logo {
            margin-top: -70px;
            padding-bottom: 20px;
            color: #1cae5e;
            font-weight: 700;
            font-size: 18px;
        }

        .logo>* {
            vertical-align: middle;
        }

        .form>div {
            background: #f7f7fb;
            border-radius: 8px;
            margin-bottom: 25px;
        }

        .form .label {
            font-size: 14px;
            color: #69707f;
            padding: 8px 16px 0 16px;

        }

        .form .van-cell {
            background: transparent;
            padding: 7px 16px;
        }


        .checkbox {
            background: transparent !important;
        }

        .van-checkbox__icon {
            background: #efefef;
        }

        .van-checkbox__icon .van-icon {
            border: 1px solid #efefef;
        }

        .loginContent {
            margin: auto;
            padding: 20px 20px;
            width: 350px;
            height: 360px;
            opacity: 1;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 10px;
        }

        .IPclass {
            display: flex;
        }

        select {
            flex: 1;
            border: none;
            background-color: transparent;
            outline: none;
        }

        select::-ms-expand {
            display: none;
        }

        .version {
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box flex-direction-r">
            <div class="right">
                <div class="bg" id="bg">
                    <div class="loginContent">
                        <div class="op"></div>
                        <div class="logo"><img src="image/BG.png"
                                style="width: 100px;margin-right: 15px;"><span>宁波易拓云工业互联网有限公司</span></div>
                        <div class="form">
                            <div>
                                <div class="label">账号</div>
                                <van-field v-model="formData.loginName" placeholder="请输入账号"></van-field>
                            </div>
                            <div>
                                <div class="label">密码</div>
                                <van-field v-model="formData.pwd" type="password" placeholder="请输入密码"></van-field>
                            </div>
                            <div class="IPclass">
                                <div class="label">服务器IP</div>
                                <select class="select" v-model="serverIP">
                                    <option v-for="(item, index) in serverIPOptions" :value="item.label">
                                        {{item.label}}
                                    </option>
                                </select>
                            </div>
                            <div class="checkbox">
                                <van-checkbox v-model="isRemb" shape="square" checked-color="#65ac5f" icon-size="18px">
                                    <span style="color:#aaa">记住密码</span>
                                </van-checkbox>
                            </div>
                        </div>
                        <div class="login-btn">
                            <van-button color="#1cae5e" round :disabled="ifConfirm" :loading="ifConfirm"
                                loading-text="登录中..." type="primary" block @click="loginAPP">登&nbsp;&nbsp;&nbsp;&nbsp;录
                            </van-button>
                        </div>
                    </div>
                    <div class="version">当前版本：{{api.appVersion}}</div>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        var loginIndex = 0;

        function ping(ip) {
            api.ajax({
                url: ip + '/Frame/SqlData?cmdname=ConnectionTest&t=' + new Date().getTime(),
                data: {
                    values: {}
                },
                timeout: 20,
                method: 'post',
                dataType: 'json'
            }, function (ret, err) {
                if (ret) {
                    // window.localStorage.setItem('serverIP', ip);
                    // APP.serverIP = ip;
                    vm.checkLoginStatus();
                } else {

                }
            });
        }

        // 修改密码后，触发，将密码置空
        api.addEventListener({
            name: 'ClearPwd'
        }, function (ret) {
            vm.formData.pwd = ''
        })


        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                formData: {
                    loginName: '',
                    pwd: ''
                },
                isRemb: false,
                showSimpleSelect: false,
                ifConfirm: false,
                serverIP: '',
                serverIPOptions: [
                    {
                        label: '192.168.1.22:9003',
                    }
                ]
            },
            created: function () {
                var that = this;

                if (window.localStorage.getItem('serverIP')) {
                    that.serverIP = window.localStorage.getItem('serverIP').split('//')[1]
                } else {
                    that.serverIP = ''
                }

            },
            mounted() {
                let height = document.body.clientHeight
                window.onresize = () => { // 在页面大小发生变化时调用
                    // 把获取到的高度赋值给根div
                    document.getElementById('bg').style.height = height + 'px'
                }
            },
            watch: {
                serverIP: {
                    handler(val, oldVal) {
                        var that = this
                        var obj
                        if (val == '192.168.1.22:9003') {
                            obj = 'http://192.168.1.22:9003'
                        }
                        window.localStorage.setItem('serverIP', obj)
                        that.checkUpdate()
                    }
                }
            },
            methods: {
                checkUpdate() {
                    var that = this
                    if (APP.getUserInfo()) {
                        that.formData.loginName = APP.getUserInfo().loginName;
                        if (APP.getUserInfo().isRemb && APP.getUserInfo().pwd) {
                            that.formData.pwd = APP.getUserInfo().pwd;
                            that.isRemb = true;
                        }
                    }
                    var latestVersion = api.appVersion;
                    console.log('latestVersion', JSON.stringify(latestVersion))
                    APP.ajax('ZS_FILELIST', {}, function (res) {
                        // console.log('res', JSON.stringify(res))
                        if (latestVersion != res.ds[0].F_Ver) {
                            api.confirm({
                                title: '有新版本，是否下载并安装',
                                msg: '版本号：' + res.ds[0].F_Ver + '\n' + '更新内容：' + res.ds[0].FRemarks,
                                buttons: ['立即更新', '取消']
                            }, function (ret, err) {
                                if (ret.buttonIndex == 1) {
                                    if (api.systemType == 'android') {
                                        // var D_Url = res.ds[0].D_Url
                                        // alert('D_Url' + JSON.stringify(res.ds[0].D_Url))
                                        api.download({
                                            url: res.ds[0].D_Url,
                                            report: true
                                        }, function (downloadRet, err) {
                                            // alert('downloadRet' + JSON.stringify(downloadRet))
                                            if (err) {
                                                api.hideProgress();
                                                api.toast({
                                                    msg: '下载失败请重试!',
                                                    duration: 2000
                                                })
                                            } else if (downloadRet.state == 0) {
                                                api.showProgress({
                                                    title: downloadRet.percent + '%',
                                                    modal: false
                                                });
                                            } else if (downloadRet.state == 1) {
                                                api.hideProgress();
                                                // alert('state1' + JSON.stringify(downloadRet))
                                                api.installApp({
                                                    appUri: 'file://' + downloadRet.savePath
                                                });
                                                api.toast({
                                                    msg: '下载完成!',
                                                    duration: 2000
                                                })
                                            }
                                        })
                                    }
                                } else {
                                    that.checkUpdate()
                                    api.toast({
                                        msg: '请更新至最新版本!',
                                        duration: 2000
                                    })
                                }
                            });
                        } else if (latestVersion == res.ds[0].F_Ver) {
                            that.loginAPP();
                        }
                    })

                },

                checkLoginStatus: function () {
                    var that = this;
                    if (loginIndex) {
                        that.loginAPP();
                    } else {
                        if (APP.getUserInfo()) {
                            that.formData.loginName = APP.getUserInfo().loginName;
                            if (APP.getUserInfo().isRemb && APP.getUserInfo().pwd) {
                                that.formData.pwd = APP.getUserInfo().pwd;
                                that.isRemb = true;
                                that.loginAPP();
                            }
                        }
                    }
                },
                loginAPP: function () {
                    var that = this;
                    if (!that.formData.loginName) {
                        layer.open({
                            content: '请填写登录账户',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (!that.formData.pwd) {
                        layer.open({
                            content: '请填写登录密码',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    that.ifConfirm = true;

                    var obj = {
                        P_Name: that.formData.loginName,
                        P_Password: that.formData.pwd
                    }
                    APP.ajax('APP_Login', obj, function (res) {

                        loginIndex = 0;
                        if (res.ds[0].status && res.ds[0].status == 500) {
                            that.ifConfirm = false;
                            layer.open({
                                content: res.ds[0].msg,
                                skin: 'msg',
                                time: 2
                            });

                        } else {
                            that.ifConfirm = false;
                            res.ds[0].isRemb = that.isRemb;
                            res.ds[0].loginName = that.formData.loginName;
                            res.ds[0].pwd = that.formData.pwd;
                            window.localStorage.setItem('userInfo', JSON.stringify(res.ds[0]));
                            api.openWin({
                                name: '主页',
                                url: 'html/menu.html',
                                reload: true,
                                slidBackEnabled: false
                            })
                        }
                    }, function (res) {
                        loginIndex++;
                        if (loginIndex < 10) {
                            // ping(APP.serverIP1);
                            // ping(APP.serverIP2);
                        } else {
                            layer.open({
                                content: '登录失败，请检查网络设置后重试',
                                skin: 'msg',
                                time: 3
                            });
                            loginIndex = 0;
                            that.ifConfirm = false;
                        }

                    })
                }
            }
        })
    };
</script>

</html>